<script setup lang="ts">
import { reactive, ref, onBeforeMount } from "vue";
import { useRouter } from "vue-router";
import tableList from "@/components/tableList/tableList.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { userList, userDelete, userUpdate } from "@/api/system/user";
import { useValidator } from '@/hooks/web/useValidator';

const { isEqual } = useValidator()
const router = useRouter()
let tableData = ref([])
let passwordVisible = ref(false)
const loading = ref()
const passwordForm = reactive({
  id: '',
  password: '',
  newPassword: '',
  confirmPassword: '',
})
const searchForm = ref('')
const passRef = ref('')
const validatePass = (rule: any, value: any, callback: any) => {
  isEqual(value, passwordForm.newPassword, callback, '两次输入密码不一致')
}
const passRules = {
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, message: '密码最少6位', trigger: 'blur' },
  ],
  confirmPassword: [
    { required: true, validator: validatePass, trigger: 'blur' },
  ]
}
const tableHeader = reactive([
  { label: '姓名', prop: 'realname' },
  { label: '角色权限', prop: 'role_name' },
  {
    label: '微信绑定', prop: 'att_id', type: 'html',
    code: (row) => {
      if (row.att_id == 1) {
        return '<span style="color:#67C23A;">已绑定</span>'
      } else {
        return '<span style="color:#F56C6C;">未绑定</span>'
      }
    }
  },
  { label: '邮箱绑定', prop: 'email' }
])

const tableOptions = reactive(
    {
      label: '操作',
      width: '400px',
      value: 1,
      options: [
        {
          label: '编辑',
          icon: 'Edit',
          method: (row) => {
            handleEdit(row)
          }
        },
        {
          label: '详情',
          icon: 'More',
          method: (row) => {
            handleInfo(row)
          }
        },
        {
          label: '重置密码',
          icon: 'EditPen',
          method: (row) => {
            handleEditPwd(row)
          }
        },
        {
          label: '删除',
          icon: 'Delete',
          method: (row) => {
            handleDel(row)
          }
        },
      ]
    }
)

const handleEdit = (row) => {
  console.log(row)
  router.push({ path: '/system/user-edit', query: { userId: row.id } })
}

const handleInfo = (row) => {
  console.log(row);
  router.push({ path: '/system/user-info', query: { userId: row.id, type: 'info' } })
}

const handleEditPwd = (row) => {
  passwordForm.id = row.id
  passwordVisible.value = true;
  passRef.value.resetFields()
}

const handleDel = (row) => {
  ElMessageBox.confirm('确定要删除吗,一旦删除无法恢复?', { type: 'warning' }).then(async () => {
    let res = await userDelete({ id: row.id })
    if (res) {
      ElMessage({
        message: '删除成功',
        type: 'success'
      })
      fetchData()
    }
  })
}

const formInline = reactive({
  realname: '',
})

const handleSave = async () => {
  passRef.value.validate(async (valid) => {
    if (valid) {
      let res = await userUpdate(passwordForm)
      if (res) {
        ElMessage({
          message: '密码重置成功',
          type: 'success'
        })
        passwordVisible.value = false
      }
    }
  })
}
const onSearch = (type) => {
  if (type === 'reset') {
    searchForm.value.resetFields()
  } else {
    fetchData()
  }

}

const fetchData = async () => {
  loading.value = true
  let res = await userList(formInline);
  loading.value = false
  console.log('user', res)
  tableData.value = res.data
}

const onAdd = () => {
  router.push('/system/user-insert')
}

onBeforeMount(() => {
  fetchData()
})
</script>
<template>
  <el-row>
    <el-col :span="24">
      <el-form :inline="true" :model="formInline" class="el-input-form" ref="searchForm">
        <el-form-item label="姓名" prop="realname">
          <el-input v-model="formInline.realname" placeholder="姓名" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="onSearch" clearable icon="search">查询</el-button>
          <el-button type="primary" plain @click="onSearch('reset')" icon="RefreshLeft">重置</el-button>
          <el-button @click="onAdd" icon="plus">新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :span="24" v-loading="loading" class="table-wrap">
      <tableList :table-data="tableData" :table-header="tableHeader" :table-options="tableOptions"></tableList>
    </el-col>
  </el-row>

  <el-dialog v-model="passwordVisible" title="重置密码" draggable width="30%">
    <el-form label-width="100px" ref="passRef" :rules="passRules" :model="passwordForm">
      <el-form-item label="原密码" prop="password">
        <el-input v-model="passwordForm.password" type="password" show-password />
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input v-model="passwordForm.newPassword" type="password" show-password />
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input v-model="passwordForm.confirmPassword" type="password" show-password />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="handleSave">保存</el-button>
        <el-button @click="passwordVisible = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>